<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Documnent</title>
		<!--1. 导入vue的包-->
		<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js" ></script>
	</head>
	<body>
		FastDFSF文件上传:
		<input type="button" value="上传文件" onclick="intoFile()" />
		<input id="uploadFile" type="file" name="uploadFile" value="选择文件"  onchange="oneKeyUploadFile()" style="display: none;"/>
		
		<br/>
		FastDFSF文件上传:
		<input type="button" value="上传图片且保存缩略图" onclick="intoImage()" />
		<input id="uploadImage" type="file" name="uploadImage" value="选择文件"  onchange="oneKeyUploadImage()" style="display: none;"/>
		
	</body>
	
	<script>
	/**
	 * 导入 按钮,响应文件上传事件
	 */
	function intoFile(){
	    $("#uploadFile").trigger("click");
	}
	
	function oneKeyUploadFile(){
		
		// 封装请求参数，文件及普通参数
		var formData = new FormData();
		formData.append("file", $("#uploadFile")[0].files[0]);
		
		var uploadExcelFileName = $("#uploadFile").val();
		if (!uploadExcelFileName) {
			return;
		}
		
		/**
		* 上传文件
		*/
		$.ajax({
					url : 'file/uoloadFastDFSFile',
					type : 'POST',
					data : formData,
					// 告诉jQuery不要去处理发送的数据
					processData : false,
					// 告诉jQuery不要去设置Content-Type请求头
					contentType : false,
					beforeSend : function() {
						console.log( '正在上传附件，请稍候……');
					},
					success : function(responseStr) {
						var obj = responseStr;
						if (true == obj.success) {
							alert('上传成功');
						} else {
							alert('上传失败:' + obj.message);
						}
					},
					complete : function(XHR, TS) {
						
					}
				});
		$('#uploadFile').val('');
	   }
	
	    //###################################################################################
	    /**
	 * 导入 按钮,响应文件上传事件
	 */
	function intoImage(){
	    $("#uploadImage").trigger("click");
	}
	
	function oneKeyUploadImage(){
		
		// 封装请求参数，文件及普通参数
		var formData = new FormData();
		formData.append("file", $("#uploadImage")[0].files[0]);
		
		//图片验证
		var uploadExcelFileName = $("#uploadImage").val();
		if (!uploadExcelFileName) {
			return;
		}
		var patrn = /^.+(png|jpg)$/;
		if (!patrn.exec(uploadExcelFileName)) {
			alert("请选择png文件");
			return;
		}
		var fileSize=$("#uploadImage")[0].files[0].size;
	    if(fileSize>(1024*1024*50)){    //暂定50M
	    	alert("附件过大,请重新上传");
	    	return;
	    }
		
		/**
		* 上传文件
		*/
		$.ajax({
					url : 'file/uoloadFastDFSFace',
					type : 'POST',
					data : formData,
					// 告诉jQuery不要去处理发送的数据
					processData : false,
					// 告诉jQuery不要去设置Content-Type请求头
					contentType : false,
					beforeSend : function() {
						console.log( '正在上传附件，请稍候……');
					},
					success : function(responseStr) {
						var obj = responseStr;
						if (true == obj.success) {
							alert('上传图片成功');
						} else {
							alert( obj.message);
						}
					},
					complete : function(XHR, TS) {
						
					}
				});
		$('#uploadImage').val('');
	   }
	

	</script>
</html>